<template>
  <a-table id="table" :pagination='false' :columns="columns" :row-key="record => record.columnName" :data-source="columnList">
    <template v-slot:nullable="{  }">
      <span>
        <a>{{ "mjw"}}</a>
      </span>
    </template>
  </a-table>
</template>

<script>
import { getTableColumns } from '../api/requet.js'
export default {
  data() {
    return {
      db: window.sessionStorage.getItem("db"),
      schemaName: "",
      tableName: "",
      columnList: []
    };
  },
  computed: {
    columns: {
      get: function () {
        var tmp = [{
          title: this.$t('column.columnName'),
          dataIndex: 'columnName',
          sorter: (a, b) => { return a.columnName.localeCompare(b.columnName) }
        }, {
          title: this.$t('column.columnComment'),
          dataIndex: 'columnComment',
          sorter: (a, b) => { return a.columnComment.localeCompare(b.columnComment) }
        }];
        var endTmp = [{
          title: this.$t('column.columnDefault'),
          dataIndex: 'columnDefault'
        }, {
          title: this.$t('column.nullable'),
          dataIndex: 'nullable',
          slots: { customRender: 'nullable' }
        }, {
          title: this.$t('column.primaryKey'),
          dataIndex: 'primaryKey'
        }];
        if (this.db === 'MySQL') {
          // 如果当前数据库是mysql
          var mysqlTmp = [{
            title: this.$t('column.mysql.columnType'),
            dataIndex: 'columnType'
          }];
          return tmp.concat(mysqlTmp).concat(endTmp);
        } else {
          // 否则当前数据库是oracle
          var oracleTmp = [{
            title: this.$t('column.oracle.dataType'),
            dataIndex: 'dataType'
          }, {
            title: this.$t('column.oracle.dataLength'),
            dataIndex: 'dataLength'
          }];
          return tmp.concat(oracleTmp).concat(endTmp);
        }
      }
    }
  },
  methods: {
    async getTableColumns() {
      this.columnList = await getTableColumns(this.schemaName, this.tableName);
    }
  },
  watch: {
    $route: {
      handler() {
        //深度监听，同时也可监听到param参数变化
        this.schemaName = this.$route.query.schema;
        this.tableName = this.$route.query.table;
        this.getTableColumns();
      },
      deep: true,
    }
  },
  mounted() {
    this.schemaName = this.$route.query.schema;
    this.tableName = this.$route.query.table;
    this.getTableColumns();
  }
}
</script>

<style>
#table {
  height: 100%;
  width: 100%;
}
</style>
